<template>
    <div>
        <!-- 搜索栏 -->
        <el-card>
            <el-row :gutter="20" class="header">
                <el-col :span="7">
                    <el-input placeholder="请输入订单号..." clearable v-model="queryFrom.query"></el-input>
                </el-col>
                <el-button type="primary" icon="el-icon-search" @click="handleSearchOrderById">搜索</el-button>
            </el-row>
        </el-card>

        <!-- 表格 -->
        <el-table style="width: 100%;" border :data="list">
            <el-table-column label="订单号" width="width" fixed>
            </el-table-column>
            <el-table-column label="用户昵称" width="width">
            </el-table-column>
            <el-table-column label="订单总价" width="width">
            </el-table-column>
            <el-table-column label="订单状态" width="width" :formatter="statusFormatter">
            </el-table-column>
            <el-table-column label="订单创建时间" width="width">
            </el-table-column>
            <el-table-column label="订单支付时间" width="width">
            </el-table-column>
            <el-table-column label="收货人" width="width">
            </el-table-column>
            <el-table-column label="联系电话" width="width">
            </el-table-column>
            <el-table-column prop="prop" label="操作" width="width" fixed="right">
                <template slot-scope="{row,$index}">
                    <el-button type="success" @click="handleShowDailog(row.id)">详情</el-button>
                    <el-button type="primary" @click="handleModifyStatus(row.id, 2)">发货</el-button>
                    <el-button type="primary" @click="handleModifyStatus(row.id, 3)">退货</el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="handleDeleteOrder(row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination style="margin-top: 20px;text-align: center;" :current-page="1" :total="33" :page-size="3"
            :pager-count="7" :page-sizes="[3, 5, 10]" layout="prev,pager,next,jumper,->,total,sizes"
            @size-change="handleSizeChange" @current-change="getOrderList">
        </el-pagination>

        <!-- 订单详情对话框 -->
        <Dialog :dialogTableVisible="dialogTableVisible" @click="handleClose" :id="id"></Dialog>
    </div>
</template>

<script>
import Dialog from './components/dialog.vue'

export default {
    components: {
        Dialog
    },
    name: 'order',
    data() {
        return {
            // 对话框显示状态
            dialogTableVisible: false,
            // 订单id
            id:-1,
            // 订单查询参数
            queryFrom: {
                query: ''
            },
            // 列表展示的订单数据
            list: [],
            // 代表分页器第几页
            page: 1,
            // 当前页数展示数据条数
            limit: 3,
            // 总共数据条数
            total: 0,

        }
    },
    mounted() {
        this.getOrderList();
    },
    methods: {
        // 获取订单列表数据
        async getOrderList(pager = 1) {
            this.page = pager;
            const { page, limit } = this;
            let result = await this.$API.order.reqOrderList(page, limit);
            if (result.code == 200) {
                this.total = result.data.total;
                this.list = result.data.records;
            }
        },
        // 当分页器某一页需要展示数据条数发生变化时触发
        handleSizeChange(limit) {
            this.limit = limit;
            this.getOrderList();
        },
        // 处理搜索栏根据订单号搜索订单事件
        async handleSearchOrderById() {
            let result = await this.$API.order.reqSearchOrderById(this.queryFrom.query);
            if (result.code == 200) {
                this.list = result.data;
            }
            this.getOrderList();
        },
        // 订单状态格式转换
        statusFormatter(row) {
            switch (row.status) {
                case 1:
                    return '待支付'
                case 2:
                    return '待发货'
                case 3:
                    return '退款/退货'
            }
        },
        // 点击查看订单详情
        handleShowDailog(orderId) {
            this.id = orderId;
            this.dialogTableVisible = true;
        },
        // 控制子组件的对话框
        handleClose() {
            this.dialogTableVisible = false;
        },
        // 修改订单状态 发货 | 退款/退货
        handleModifyStatus(id, status) {
            this.$confirm('您确认要更新这个订单状态吗?', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let result = this.$API.order.reqUpdateStatus({ id, status });
                if (result.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '执行成功!'
                    });
                } else {
                    this.$message({
                        type: 'success',
                        message: '已取消执行'
                    });
                }
            }).catch(() => {

            });
        },
        // 删除某一订单
        async handleDeleteOrder(id) {
            this.$confirm('您确认要删除该订单吗?', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let result = await this.$API.order.reqDeleteOrder(id);
                if (result.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                } else {
                    this.$message({
                        type: 'success',
                        message: '删除失败'
                    });
                }
            }).catch(() => {

            });
        }
    }
}

</script>

<style lang="scss" scoped>
.header {
    padding-bottom: 16px;
    box-sizing: border-box;
}
</style>